<template>
  <div>

	<myheader></myheader>


	<br /><br />

	<Breadcrumb :datas="datas"></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">
        <Avatar :src='showsrc' :width='150' fit='fill'></Avatar>


        <Avatar :src="src" :width='150' fit='fill'></Avatar>
				<input type="file" @change="update">
        <br>
        {{ imgload }}
        七牛云上传:<input type="file" @change="upload_qiniu">
        <br><br>
        <div>修改密码：<input type="password" v-model="password"></div>
        <br><br>

        <Button color = 'blue' @click="submit">提交修改</Button>
        <Button color = 'blue' @click="password1">修改密码</Button>

		</div>
	</section>
	
	
	<myfooter></myfooter>
	
    
  </div>
  
</template>


 
<script>

//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

export default {
  data () {
    return {
	  //面包屑导航
	  datas:[{title:'首页',route:{name:'index'}},{title:'我的主页'}],
    src:'',
    //原始路径
	  mysrc:'',
    param:[],
    imgurl:'',
    uptoken:'',
    //进度展示
    imgload:'',
    password:'',
    showsrc:'',
  
    }
  },
  //定义组件
  components:{
	'myheader':myheader,
	'myfooter':myfooter
  },
  mounted:function(){
    //获取密钥
    this.get_token()

    this.show()
   
},
  methods:{
    //展示用户头像
	show:function(){

		this.axios.get('http://127.0.0.1:8000/show/',{params:{username:localStorage.getItem('username')}})
		.then((result)=>{

      console.log(result)
      
			this.showsrc = 'http://127.0.0.1:8000/static/upload/' + result.data.img
    })
    
	},
    //修改密码
    password1:function(){

  		//发送请求
		this.axios.get('http://localhost:8000/updatepassword/',{params:{uid:localStorage.getItem('uid'),password:this.password}}).then((result) =>{

			console.log(result);

			this.$Message(result.data.message);

		});


  	},
    //提交用户修改
  	submit:function(){

  		//发送请求
		this.axios.get('http://localhost:8000/updateuser/',{params:{uid:localStorage.getItem('uid'),img:this.mysrc}}).then((result) =>{

			console.log(result);

			this.$Message(result.data.message);

		});


  	},
    //上传七牛云
    upload_qiniu:function(e){
      //获取密钥
      this.get_token();

      //声明文件对象
       let file = e.target.files[0];
      //声明参数
      let param = new FormData();
      //添加文件
      param.append('file', file, file.name);
      param.append('token',this.uptoken)

      //定制axios请求
      const axios_qiniu = this.axios.create({withCredentials:false})

      axios_qiniu({
        method:'POST',
        url:'http://up-z1.qiniu.com/',
        data:param,
        timeout:30000,
        //上转进度捕捉方法 下载进度:onDownload
        onUploadProgress:(e)=>{
          //计算进度
          var complete = (e.loaded / e.total);
          //判断
          if (complete < 1){
            this.imgload = (complete * 100).toFixed(2) + '%';
          }
        }

      }).then(result =>{
        console.log(result);
        //请求结束设置为100%
        this.imgload = '100%'
      })
    },

    //获取令牌方法
    get_token(){
       // 添加请求头
    this.axios.get('http://localhost:8000/uptoken/')
        .then((result) =>{

            console.log(result);
            //动态赋值
            this.uptoken = result.data.uptoken
      })
    },
	  //上传图片
    update:function(e) {

      //声明文件对象
       let file = e.target.files[0];
      //声明参数
      let param = new FormData();
      //添加文件
      param.append('file', file, file.name);
      //声明头部
      let config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }

      var _this = this;
     // 添加请求头
    this.axios.post('http://localhost:8000/uploadfile/', param, config)
        .then(function(result) {

            console.log(result);
            // if(result.data.filetype == 'mp4'){
            //   this.mp4 = 'http://localhost:8000/static/upload/'+result.data.filename + '.' + result.data.filetype;
            // }
            // this.src = 'http://localhost:8000/static/upload/'+result.data.filename + '.' + result.data.filetype;
            // console.log(this.src)

            //将返回的图片地址传递到节点
            _this.src = "http://localhost:8000/static/upload/"+result.data.filename;
            //保留一份原始图片
            _this.mysrc = result.data.filename;
       
									 
    });

    }
	
	
     
  }
}


</script>
 
<style>



</style>